import React from 'react';
import { ProductItem } from '../wangTypes/index';
import { Image } from "antd";
import { useNavigate } from 'react-router-dom';

const PromotionSection: React.FC = () => {
  const navigate = useNavigate();
  const products: ProductItem[] = [
    { id: 1, name: 'HUAWEI Mate 70 RS 非凡大师', price: 11999, image: <Image preview={false} width={200} src='https://res2.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/428_428_D0C8A9A011D150F59C4108C3AF625E3C.png' /> },
    { id: 2, name: 'Mate X5', price: 10499, image: <Image preview={false} width={200} src='https://res4.vmallres.com/pimages/uomcdn/CN/pms/202309/gbom/6942103107221/800_800_959526DD397D0C873FCE80CE67C9A0BFmp.png' /> },
    { id: 3, name: 'Pura 70 Ultra', price: 7499, image: <Image preview={false} width={200} src='https://res3.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_B279302AA299E32D157D480E3103F6DC.png' /> },
    { id: 4, name: 'HUAWEI Pura X', price: 9999, image: <Image preview={false} width={200} src='https://res7.vmallres.com/pimages/FssCdnProxy/vmall_product_uom/pmsSalesFile/800_800_4283274C870772C2A8F7657A3D8735EF.png' /> }
  ];

  const handleProductClick = () => {
    window.scrollTo(0, 0); // 滚动到页面顶部
    navigate('/productDetail');
  };

  return (
    <div className="promotion-section">
      <h3 className="section-title">热销商品</h3>
      <div className="product-list">
        {products.map((product) => (
          <div key={product.id} className="product-item" onClick={handleProductClick}>
            <div style={{
              height: '200px',
              backgroundColor: '#f5f5f5',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}>
              {product.image}
            </div>
            <div style={{ padding: '15px' }}>
              <h4>{product.name}</h4>
              <p style={{ color: '#c00', fontWeight: 'bold' }}>¥{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PromotionSection;